<template>
<!-- 楼宇管理 -->
    <div class="BuildingManagement">
        <div class="query">
             <el-select
                v-model="value2"
                multiple
                collapse-tags
                style="margin-left: 20px;"
                placeholder="请选择社区" class="selection">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label">
                </el-option>
            </el-select>
            <!-- 查询和重置按钮 -->
            <el-button type="primary" class="chaxun" @click="select"><i class="el-icon-search" ></i>查询</el-button>
            <el-button class="reaseat" @click="reasert"><i class="el-icon-refresh-right" ></i>重置</el-button>
        </div>
        <!-- 数据表格 -->
        <div class="datalists">
            <div class="datalistsname">数据列表</div>
            <!-- 添加按钮 -->
            <el-button type="primary" class="append" @click="append"><i class="el-icon-plus"></i>添加</el-button>
            <!-- 批量添加 -->
            <el-button type="primary" class="appends" @click="append"><i class="el-icon-folder-add"></i>批量添加</el-button>
            <!-- 数据表格 -->
            <div class="datatable">
                <el-table
                :data="tableData"
                border
                stripe
                style="width: 100%">
                    <el-table-column
                    type="index"
                    label="序号"
                    width="74">
                    </el-table-column>
                    <el-table-column
                    prop="Belongingcommunity"
                    label="所属小区"
                    width="81">
                    </el-table-column>
                    <el-table-column
                    prop="Buildingname"
                    label="楼宇名称"
                    width="96">
                    </el-table-column>
                    <el-table-column
                    prop="Numberofunits"
                    label="单元数"
                    width="63">
                    </el-table-column>
                    <el-table-column
                    prop="Buildingtype"
                    label="楼宇类型"
                    width="84">
                    </el-table-column>
                    <el-table-column
                    prop="buildingstructure"
                    label="建筑结构"
                    width="84">
                    </el-table-column>
                    <el-table-column
                    prop="Numberoflayers"
                    label="层数"
                    width="51">
                    </el-table-column>
                    <el-table-column
                    prop="BuildingUsage"
                    label="楼宇用途"
                    width="112">
                    </el-table-column>
                    <el-table-column
                    prop="Constructiondate"
                    label="建成日期"
                    width="96">
                    </el-table-column>
                    <el-table-column
                    prop="acceptancedate"
                    label="验收日期"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="buildingarea"
                    label="建筑面积"
                    width="94">
                    </el-table-column>
                    <el-table-column
                    prop="usablearea"
                    label="使用面积"
                    width="79">
                    </el-table-column>
                    <el-table-column
                    prop="operate"
                    label="操作"
                    width="203">
                        <template slot-scope="scope">
                            <i class="el-icon-office-building"></i>
                            <span style="margin-left: 5px;margin-right:5px" @click="building">{{ scope.row.edit }}</span>
                            <i class="el-icon-edit"></i>
                            <span style="margin-left: 5px;margin-right:5px" @click="edit(scope.row.date)">{{ scope.row.del }}</span>
                            <i class="el-icon-delete"></i>
                            <span style="margin-left: 5px;margin-right:5px" @click="del(scope.row.date)">{{ scope.row.opertes}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <div class="block">
                    <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage2"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="50"
                    layout=" prev, pager, next, sizes,jumper"
                    :total="totalpage">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            options: [{
            value: '选项1',
            label: '万达文旅城'
            }, {
            value: '选项2',
            label: '碧桂园'
            }, {
            value: '选项3',
            label: '万象城'
            }, {
            value: '选项4',
            label: '大卫城'
            }, {
            value: '选项5',
            label: '银座时代'
            }],     //多选选项
            value2: [], //多选选项框
            // tableData: [
            //     {
            //         date: '1',
            //         Belongingcommunity: '万象城',
            //         Buildingname: '1号楼',
            //         Numberofunits:'2',
            //         Buildingtype:'高层',
            //         buildingstructure:'混凝土结构',
            //         Numberoflayers:'32',
            //         BuildingUsage:'住宅楼',
            //         Constructiondate:'2021-06-20',
            //         acceptancedate:'2021-06-20',
            //         buildingarea:'49433㎡',
            //         usablearea:'49433㎡',
            //         edit:'房屋管理',
            //         del:'编辑',
            //         opertes:'删除'
            //     }, 
            //     {
            //         date: '2',
            //         Belongingcommunity: '万象城',
            //         Buildingname: '1号楼',
            //         Numberofunits:'2',
            //         Buildingtype:'高层',
            //         buildingstructure:'混凝土结构',
            //         Numberoflayers:'32',
            //         BuildingUsage:'住宅楼',
            //         Constructiondate:'2021-06-20',
            //         acceptancedate:'2021-06-20',
            //         buildingarea:'49433㎡',
            //         usablearea:'49433㎡',
            //         edit:'房屋管理',
            //         del:'编辑',
            //         opertes:'删除'
            //     }, 
            //     {
            //         date: '2',
            //         Belongingcommunity: '万象城',
            //         Buildingname: '1号楼',
            //         Numberofunits:'2',
            //         Buildingtype:'高层',
            //         buildingstructure:'混凝土结构',
            //         Numberoflayers:'32',
            //         BuildingUsage:'住宅楼',
            //         Constructiondate:'2021-06-20',
            //         acceptancedate:'2021-06-20',
            //         buildingarea:'49433㎡',
            //         usablearea:'49433㎡',
            //         edit:'房屋管理',
            //         del:'编辑',
            //         opertes:'删除'
            //     }, 
            //     {
            //         date: '2',
            //         Belongingcommunity: '万象城',
            //         Buildingname: '1号楼',
            //         Numberofunits:'2',
            //         Buildingtype:'高层',
            //         buildingstructure:'混凝土结构',
            //         Numberoflayers:'32',
            //         BuildingUsage:'住宅楼',
            //         Constructiondate:'2021-06-20',
            //         acceptancedate:'2021-06-20',
            //         buildingarea:'49433㎡',
            //         usablearea:'49433㎡',
            //         edit:'房屋管理',
            //         del:'编辑',
            //         opertes:'删除'
            //     }, 
            //     {
            //         date: '2',
            //         Belongingcommunity: '万象城',
            //         Buildingname: '1号楼',
            //         Numberofunits:'2',
            //         Buildingtype:'高层',
            //         buildingstructure:'混凝土结构',
            //         Numberoflayers:'32',
            //         BuildingUsage:'住宅楼',
            //         Constructiondate:'2021-06-20',
            //         acceptancedate:'2021-06-20',
            //         buildingarea:'49433㎡',
            //         usablearea:'49433㎡',
            //         edit:'房屋管理',
            //         del:'编辑',
            //         opertes:'删除'
            //     }, 
            //     {
            //         date: '2',
            //         Belongingcommunity: '万象城',
            //         Buildingname: '1号楼',
            //         Numberofunits:'2',
            //         Buildingtype:'高层',
            //         buildingstructure:'混凝土结构',
            //         Numberoflayers:'32',
            //         BuildingUsage:'住宅楼',
            //         Constructiondate:'2021-06-20',
            //         acceptancedate:'2021-06-20',
            //         buildingarea:'49433㎡',
            //         usablearea:'49433㎡',
            //         edit:'房屋管理',
            //         del:'编辑',
            //         opertes:'删除'
            //     }, 
            //     {
            //         date: '2',
            //         Belongingcommunity: '万象城',
            //         Buildingname: '1号楼',
            //         Numberofunits:'2',
            //         Buildingtype:'高层',
            //         buildingstructure:'混凝土结构',
            //         Numberoflayers:'32',
            //         BuildingUsage:'住宅楼',
            //         Constructiondate:'2021-06-20',
            //         acceptancedate:'2021-06-20',
            //         buildingarea:'49433㎡',
            //         usablearea:'49433㎡',
            //         edit:'房屋管理',
            //         del:'编辑',
            //         opertes:'删除'
            //     }, 
            //     {
            //         date: '2',
            //         Belongingcommunity: '万象城',
            //         Buildingname: '1号楼',
            //         Numberofunits:'2',
            //         Buildingtype:'高层',
            //         buildingstructure:'混凝土结构',
            //         Numberoflayers:'32',
            //         BuildingUsage:'住宅楼',
            //         Constructiondate:'2021-06-20',
            //         acceptancedate:'2021-06-20',
            //         buildingarea:'49433㎡',
            //         usablearea:'49433㎡',
            //         edit:'房屋管理',
            //         del:'编辑',
            //         opertes:'删除'
            //     }, 
            //     {
            //         date: '2',
            //         Belongingcommunity: '万象城',
            //         Buildingname: '1号楼',
            //         Numberofunits:'2',
            //         Buildingtype:'高层',
            //         buildingstructure:'混凝土结构',
            //         Numberoflayers:'32',
            //         BuildingUsage:'住宅楼',
            //         Constructiondate:'2021-06-20',
            //         acceptancedate:'2021-06-20',
            //         buildingarea:'49433㎡',
            //         usablearea:'49433㎡',
            //         edit:'房屋管理',
            //         del:'编辑',
            //         opertes:'删除'
            //     }, 
            //     {
            //         date: '2',
            //         Belongingcommunity: '万象城',
            //         Buildingname: '1号楼',
            //         Numberofunits:'2',
            //         Buildingtype:'高层',
            //         buildingstructure:'混凝土结构',
            //         Numberoflayers:'32',
            //         BuildingUsage:'住宅楼',
            //         Constructiondate:'2021-06-20',
            //         acceptancedate:'2021-06-20',
            //         buildingarea:'49433㎡',
            //         usablearea:'49433㎡',
            //         edit:'房屋管理',
            //         del:'编辑',
            //         opertes:'删除'
            //     }, 
            //     {
            //         date: '2',
            //         Belongingcommunity: '万象城',
            //         Buildingname: '1号楼',
            //         Numberofunits:'2',
            //         Buildingtype:'高层',
            //         buildingstructure:'混凝土结构',
            //         Numberoflayers:'32',
            //         BuildingUsage:'住宅楼',
            //         Constructiondate:'2021-06-20',
            //         acceptancedate:'2021-06-20',
            //         buildingarea:'49433㎡',
            //         usablearea:'49433㎡',
            //         edit:'房屋管理',
            //         del:'编辑',
            //         opertes:'删除'
            //     }, 
            //     {
            //         date: '3',
            //         Belongingcommunity: '万象城',
            //         Buildingname: '1号楼',
            //         Numberofunits:'2',
            //         Buildingtype:'高层',
            //         buildingstructure:'混凝土结构',
            //         Numberoflayers:'32',
            //         BuildingUsage:'住宅楼',
            //         Constructiondate:'2021-06-20',
            //         acceptancedate:'2021-06-20',
            //         buildingarea:'49433㎡',
            //         usablearea:'49433㎡',
            //         edit:'房屋管理',
            //         del:'编辑',
            //         opertes:'删除'
            //     }, 
            // ],//数据表格数据
            currentPage2: 1,    //分页器当前页
            pagelimit:10,       //分页器条数限制
            tableData:[],       //列表数据
            datalists:[],       //存储数据库返回的总数居
            totalpage:500       //总数据条数
        }
    },
    methods:{
        select(){
            this.currentPage2=1
            this.datalists=[]
            this.value2.forEach(item=>{
                fetch(`http://127.0.0.1/buildingmanagementselect?name=${item}`).then(res=>res.json()).then(res1=>{
                    console.log(res1,1111111111)
                    this.datalists.push(...res1)
                }).catch(err=>{
                    console.log(err)
                })
            })
            setTimeout(() => {
                console.log(this.datalists.length)
                this.totalpage=this.datalists.length
                this.tableData=this.datalists.sort((a,b)=> a.date-b.date).slice((this.currentPage2-1)*this.pagelimit,this.pagelimit*this.currentPage2)
            }, 500);
        },
        reasert(){
            console.log("重置")
            this.value2=[]
             fetch('http://127.0.0.1/buildingmanagement').then(res=>res.json()).then(res1=>{
                this.totalpage=res1.length
                this.datalists=res1
                this.tableData=res1.slice((this.currentPage2-1)*this.pagelimit,this.pagelimit*this.currentPage2)
                console.log(2222)
            }).catch(err=>{
                console.log(err)
            })
        },
        append(){
            console.log("添加")
            this.$router.push('/about/BatchAdd')
        },
        // 分页器打印
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pagelimit=val
            this.currentPage2=1
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage2=val
        },
        // 数据表格中楼宇管理、编辑和删除
        building(){
            console.log("房屋管理")
            this.$router.push('/about/HousingManagement')
        },
        edit(i){
            console.log('编辑',i)
            // let newarr=this.tableData.find(item=>item.date=1)
            this.$router.push({
                path:'/about/BatchAdd',
                query:{
                    data:this.tableData.find(item=>item.date==i)
                }
            })
        },
        del(i){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    
                    fetch(`http://127.0.0.1/buildingmanagementdel?date=${i}`,{
                        method: 'POST', // 指定请求方法
                        headers: {
                            'Content-Type': 'application/json', // 设置请求的Content-Type
                        },
                        body: JSON.stringify({ key: 'value' }), // 将数据转换为JSON字符串作为请求体
                    }).then(res=>res.json()).then(res1=>{
                        console.log(i,22222222)
                        this.datalists.forEach((item,index)=>{
                            if(item.date==i){
                                this.datalists.splice(index,1)
                            }
                        })
                        this.tableData=this.datalists.filter(item=>item.date!=i).slice((this.currentPage2-1)*this.pagelimit,this.pagelimit*this.currentPage2)
                        if(this.totalpage>0){
                            this.totalpage--
                        }else{
                            this.totalpage=0
                        }
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(err=>{
                        console.log(err)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
            });
            console.log('删除')
            
        }
    },
    created(){
        fetch('http://127.0.0.1/buildingmanagement').then(res=>res.json()).then(res1=>{
            this.totalpage=res1.length
            this.datalists=res1
            this.tableData=res1.slice((this.currentPage2-1)*this.pagelimit,this.pagelimit*this.currentPage2)
            console.log(2222)
        }).catch(err=>{
            console.log(err)
        })
    },
    watch:{
        currentPage2:{
            handler(val,oldval){
                // fetch('http://127.0.0.1/buildingmanagement').then(res=>res.json()).then(res1=>{
                //     this.totalpage=res1.length
                //     this.tableData=res1.slice((val-1)*this.pagelimit,this.pagelimit*val)
                // }).catch(err=>{
                //     console.log(err)
                // })
                
                this.tableData=this.datalists.slice((val-1)*this.pagelimit,this.pagelimit*val)
            },
            // immediate:true
        },
        pagelimit:{
            handler(val,oldval){
                // fetch('http://127.0.0.1/buildingmanagement').then(res=>res.json()).then(res1=>{
                //     this.totalpage=res1.length
                //     this.tableData=res1.slice((this.currentPage2-1)*val,val*this.currentPage2)
                // }).catch(err=>{
                //     console.log(err)
                // })
                this.tableData=this.datalists.slice((this.currentPage2-1)*val,val*this.currentPage2)
            }
        }
    },
    
};
</script>

<style lang="scss" scoped>
    .BuildingManagement{
        width: 1260px;
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        .query{
            width: 1260px;
            height: 95px;
            display: flex;
            align-items: center;
            background-color: #fff;
            box-sizing: border-box;
            border:  1px solid rgba(233, 233, 233, 1);
            padding-left: 20px;
            position: relative;
            .selection{
                width: 405px;
                ::v-deep .el-input__inner{
                    height: 35px;
                }
            }
            // 查询按钮
            .chaxun{
                width: 80px;
                height: 35px;
                margin-left: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #0079fe !important;
                .el-icon-search{
                    font-size: 16px;
                    margin-right: 5px;
                }
            }
            .chaxun:hover{
                background-color: #66b1ff !important;
                color: #fff !important;
            }
            // 重置按钮
            .reaseat{
                width: 80px;
                height: 35px;
                margin-left: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #fff !important;
                .el-icon-refresh-right{
                    font-size: 16px;
                    margin-right: 5px;
                }
            }
            .reaseat:hover{
                border-color: #0079fe !important;
                color: #0079fe !important;
            }
            
        }
        // 数据列表
        .datalists{
            width: 1260px;
            height: 1196px;
            padding: 0 20px;
            margin-top: 10px;
            background-color: #fff;
            border: 1px solid rgba(233, 233, 233, 1);
            position: relative;
            box-sizing: border-box;
            // 数据列表名字名称
            .datalistsname{
                margin-top: 40px;
                width: 57px;
                height: 18px;
                line-height: 18px;
                color: #666666;
                font-size: 14px;
            }
            // 添加数据按钮
            .append,.appends{
                min-width: 80px;
                padding: 0 5px;
                height: 35px;
                position: absolute;
                right: 20px;
                top: 23px;
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                background-color: #0079fe !important;
                .el-icon-plus,.el-icon-folder-add{
                    font-size: 16px;
                    margin-right: 5px;
                    font-weight: 700;
                }
            }
            .append:hover,.appends:hover{
                background-color: #66b1ff !important;
                color: #fff !important;
            }
            .appends{
                position: absolute;
                padding: 0 2px;
                right: 120px;
                top: 23px;
            }
            // 数据表格
            .datatable{
                margin-top: 20px;
                ::v-deep .has-gutter th{
                    height: 45px !important;
                    background-color: #f5f5f5;
                    box-sizing: border-box;
                    padding: 0 !important;
                    font-size: 14px;
                    color: #666666;
                    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑' !important;
                }
                ::v-deep .el-table__row td{
                    height: 50px !important;
                    padding: 0 !important;
                }
                ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
                    background-color: #f9f9f9;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(2){
                    text-align: center !important;
                    color: #666 !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(1){
                    color: #0079fe !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(4){
                    color: #999 !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-last-child(1){
                    text-align: center;
                    color: #0079fe;
                    // cursor: pointer;
                }
                ::v-deep .el-table__row .el-table__cell:nth-last-child(1) span:hover{
                    cursor: pointer;
                    text-decoration: underline !important;
                    // color: #4a4a4a;
                }
                ::v-deep .el-table__row .el-table__cell{
                    color: #666666;
                    font-size: 12px;
                }
                ::v-deep .el-table__row:hover{
                    background-color: inherit !important;
                }
                // 分页
                .block{
                    display: flex;
                    justify-content: end;
                    ::v-deep .el-pagination__sizes{
                        margin-left: 10px;
                        width: 80px;
                        height: 35px;
                        line-height: 35px;
                    }
                    ::v-deep .btn-prev,::v-deep .el-pager li,::v-deep .btn-next{
                        width: 35px;
                        height: 35px;
                        line-height: 35px;
                        background-color: #fff;
                        border: 1px solid rgba(228, 228, 228, 1);
                    }
                    ::v-deep .el-pager .active{
                        background-color: #0079fe !important;
                    }
                    ::v-deep .el-pager .active:hover{
                        color: #fff !important;
                        border: 1px solid rgb(228, 228, 228) !important;
                        box-sizing: border-box;
                    }
                    ::v-deep .el-pager li:hover,::v-deep .btn-prev:hover,::v-deep .btn-next:hover,::v-deep  .el-pagination__sizes .el-input .el-input__inner:hover {
                        border-color: #0079fe;
                        color: #0079fe;
                    }
                    ::v-deep .el-input--mini .el-input__inner,::v-deep .el-input--mini .el-input__icon {
                        height: 35px;
                        line-height: 35px;
                    }
                    ::v-deep .el-pagination .el-select .el-input {
                        width: 86px;
                        margin: 0 5px;
                    }
                    ::v-deep .el-pagination__jump{
                        height: 35px;
                        line-height: 35px;
                    }
                    ::v-deep .el-input__inner:focus {
                        border-color: rgb(228, 228, 228) !important;
                        outline: 0;
                    }
                }
            }
        }
    }
     

</style>